<template>
  <div class="coupon">
    <top-bar :title="'优惠券'" :subtitle="'我的优惠券'" :subPath="'/me/myCoupon'"/>
    <div class="content">
      <div class="buttons">
        <button v-for="item in buttons" :key="item.id"
                :class="{'stylesTrue': current==item.id}" @click="active(item.id)">
          <div class="kong" v-if="current!=item.id && block"></div>
          {{ item.name }}
          <span>({{ item.id == 1 ? couponSingleList.count : couponGeneralList.count }})</span>
        </button>
      </div>
      <div class="coupon-items">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad">
            <div :class="[item.type==2 ? 'bgStyle' : 'bgStyle_2']" class="styles"
                 v-for="item in current == 1 ? couponSingleList.list : couponGeneralList.list" :key="item.id">
              <div class="left">
                <div class="money">
                  <p class="money-hint" v-if="item.everyday >= 1">每日领取</p>
                  <p class="money-hint" v-else-if="item.receive_limit > 1">重复领取</p>
                  <span class="money-unit">¥</span>
                  <span class="money-value" :class="fontSize(item.money)">{{ item.money }}</span>
                </div>
                <div class="couponName">
                  {{ item.type == 1 ? '游戏优惠券' : 'K金优惠券' }}
                </div>
              </div>
              <div class="center">
                <span>{{ item.condition }}</span>
                <span>截止时间：{{ dateTransform(item.end_time, 'yyyy-MM-dd') }}</span>
                <span>{{ item.overlay_type == 0 ? '可与游戏内折扣叠加使用' : '不可与游戏内折扣叠加使用' }}</span>
              </div>
              <div
                :class="[item.status==0 ? 'draw_1' : 'draw_2']"
                class="right" @click="receive(item)">
                {{ item.status == 0 ? '领取' : '已领取' }}
              </div>
            </div>
          </van-list>
        </van-pull-refresh>
      </div>
    </div>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
import topBar from './topBar'
import * as api from '../../api'

export default {
  name: 'coupon',
  components: {
    topBar
  },
  data () {
    return {
      state: false,
      current: 1,
      loading: false,
      finished: false,
      refreshing: false,
      page: 1,
      buttons: [
        {
          id: 1,
          name: '单游券',
          nums: null
        },
        {
          id: 2,
          name: '通用券',
          nums: null
        }
      ],
      action: '',
      couponSingleList: {
        list: [],
        count: 0
      },
      couponGeneralList: {
        list: [],
        count: 0
      },
    }
  },
  computed: {
    ...mapGetters([
      'actionStatus',
      'failMsg'
    ]),
    block () {
      let list
      if (this.current == 2) {
        list = this.couponSingleList
      } else {
        list = this.couponGeneralList
      }
      let block = false
      if (list.hasOwnProperty('list')) {
        list.list.filter(item => {
          if (!item.status) {
            block = true
          }
        })
      }
      return block
    },
  },
  methods: {
    fontSize (item) {
      if (item < 1000) {
        return 'font_size_1'
      }
      if (item < 10000) {
        return 'font_size_2'
      }
      return 'font_size_3'
    },
    sortList (list) {
      let receiveList = []
      let unReceiveList = []
      list.filter(item => {
        if (item.status) {
          receiveList.push(item)
        } else {
          unReceiveList.push(item)
        }
      })
      return unReceiveList.concat(receiveList)
    },
    active (index) {
      this.current = index
      this.finished = false
      this.loading = false
      this.page = 1
      this.getCouponList()
    },
    // 领取优惠券
    receive (item) {
      if (item.status == 0) {
        this.$store.dispatch('receiveCoupon', item.id)
        this.action = 'add'
      }
    },
    onLoad () {
      if (this.finished) {
        this.refreshing = false
        return
      }
      this.page++
      setTimeout(() => {
        this.getCouponList()
      }, 100)
    },
    onRefresh () {
      // 清空列表数据
      this.finished = false
      this.loading = false
      this.page = 0
      this.onLoad()
    },
    getCouponList (single = -1) {
      let obj = {
        page: this.page,
        offset: 20,
        single: single
      }
      if (this.page == 1) {
        if (this.current === 1) {
          this.couponSingleList.list = []
        } else {
          this.couponGeneralList.list = []
        }
      }
      if (single === -1) {
        if (this.current === 1) {
          obj.single = 1
        } else {
          obj.single = 0
        }
      }
      api.getCouponList(obj, data => {
        if (obj.single) {
          if (obj.page != 1) {
            this.couponSingleList.list = this.couponSingleList.list.concat(data.list)
            this.couponSingleList.count = data.count
          } else {
            this.couponSingleList = data
          }
          //this.couponSingleList.list = this.sortList(this.couponSingleList.list)
          if (this.current === 1) {
            if (this.couponSingleList.list.length >= this.couponSingleList.count) {
              this.finished = true
            } else if (!this.finished && !data.count) {
              this.finished = true
            }
          }
        } else {
          if (obj.page != 1) {
            this.couponGeneralList.list = this.couponGeneralList.list.concat(data.list)
            this.couponGeneralList.count = data.count
          } else {
            this.couponGeneralList = data
          }
          //this.couponGeneralList.list = this.sortList(this.couponGeneralList.list)
          if (this.current !== 1) {
            if (this.couponGeneralList.list.length >= this.couponGeneralList.count) {
              this.finished = true
            } else if (!this.finished && !data.count) {
              this.finished = true
            }
          }
        }
        this.refreshing = false
        this.loading = false
      })
    },
  },
  watch: {
    actionStatus () {
      if (this.actionStatus) {
        if (this.action === 'add') {
          this.Toast('领取成功', 500)
          this.finished = false
          this.loading = false
          this.page = 1
          this.getCouponList()
        }
      }
    },
    failMsg () {
      this.failMsg && this.Toast(this.failMsg, 500)
    }
  },
  created () {
    this.getCouponList(0)
    this.getCouponList(1)
  }
}
</script>

<style lang="scss" scoped>
.coupon {
  padding: 0.75rem 0.48rem;

  .content {
    margin-top: 0.67rem;

    .buttons {
      display: flex;
      justify-content: space-between;
      margin-bottom: 0.27rem;

      button {
        width: 4.44rem;
        height: 0.99rem;
        background: rgba(255, 255, 255, 0.6);
        border-radius: 0.53rem;
        font-size: 0.37rem;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        position: relative;

        > span {
          font-size: 0.35rem;
          color: #999999;
        }
      }

      .stylesTrue {
        background: #FF0300;
        color: #FFFFFF;

        > span {
          color: #FFFFFF;
        }
      }

      .kong {
        width: 0.29rem;
        height: 0.29rem;
        background: #FF0300;
        border-radius: 50%;
        position: absolute;
        right: 0.9rem;
        top: -0.13rem;
      }

      .display {
        display: none;
      }
    }

    .coupon-items::-webkit-scrollbar {
      width: 0 !important
    }

    .coupon-items {
      height: 7rem;
      overflow-x: hidden;
      overflow-y: scroll;

      .styles {
        display: flex;
        align-items: center;
        padding: 0 0.4rem 0 0.38rem;
        position: relative;

        margin-bottom: 0.3rem;
        width: 100%;
        height: 2.24rem;

        .left {
          display: flex;
          flex-direction: column;
          justify-content: center;
          width: 1.2rem;

          .money {
            display: flex;
            align-items: baseline;
            justify-content: center;

            .money-hint {
              position: absolute;

              font-family: SourceHanSansCN-Heavy, SourceHanSansCN;
              font-weight: 400;
              font-size: 0.25rem;
              color: #FF5832;
              padding: 0.05rem 0.15rem;
              border: 0.03rem solid #FF5832;
              border-radius: 0.2rem 0.2rem 0.2rem 0;
              top: 0;
              left: 0;
            }

            .money-unit {
              font-size: 0.32rem;
              font-family: SourceHanSansCN-Heavy, SourceHanSansCN;
              font-weight: 800;
              color: #FF5832;
            }

            .money-value {
              margin-left: 0.05rem;
              font-family: SourceHanSansCN-Bold, SourceHanSansCN;
              font-weight: bold;
              color: #FF5832;
            }
          }
        }

        .center {
          flex: 1;
          display: flex;
          flex-direction: column;
          margin-left: 0.7rem;
          margin-top: 0.1rem;

          > span:nth-child(1) {
            font-size: 0.35rem;
            font-family: SourceHanSansCN-Bold, SourceHanSansCN;
            font-weight: bold;
            color: #181818;
          }

          > span:nth-child(2) {
            font-size: 0.27rem;
            font-family: SourceHanSansCN-Regular, SourceHanSansCN;
            font-weight: 400;
            color: #666666;
            margin: 0.24rem 0;
          }

          > span:nth-child(3) {
            font-size: 0.29rem;
            font-family: SourceHanSansCN-Regular, SourceHanSansCN;
            font-weight: 400;
            color: #666666;
          }
        }

        .couponName {
          font-size: 0.24rem;
          font-family: SourceHanSansCN-Regular, SourceHanSansCN;
          font-weight: 400;
          color: #FF5832;
          margin-top: 0.29rem;
        }

        .right {
          width: 1.49rem;
          height: 0.67rem;
          border-radius: 0.33rem;
          font-size: 0.32rem;
          font-family: SourceHanSansCN-Medium, SourceHanSansCN;
          font-weight: 500;
          text-align: center;
          line-height: 0.67rem;
          margin-right: 0.20rem;
        }

        .draw_1 {
          background: #FDF3E9;
          color: #FF5832;
        }

        .draw_2 {
          background: #F5F5F5;
          color: #B5B5B5;
        }
      }

      .bgStyle {
        background: url("../../assets/images/personal_center/couponActive.png") no-repeat;
        background-size: 100% 100%;

        .left {
          .money {
            display: flex;
            align-items: baseline;
            justify-content: center;

            .money-hint {
              color: #FDED75;
              border: 0.03rem solid #FDED75;
            }

            .money-unit {
              color: #FDED75;
              text-shadow: 2px 5px 5px rgba(85, 16, 16, 0.36);
            }

            .money-value {
              color: #FDED75;
              text-shadow: 2px 5px 5px rgba(85, 16, 16, 0.36);
            }
          }
        }

        .center {
          margin-top: -0.1rem;

          > span:nth-child(1) {
            color: #FFFFFF;
          }

          > span:nth-child(2) {
            color: #FFF0F0;
          }

          > span:nth-child(3) {
            color: #FFF0F0;
          }
        }

        .couponName {
          font-size: 0.24rem;
          font-weight: bold;
          color: #FDED75;
          text-shadow: 2px 5px 5px rgba(85, 16, 16, 0.36);
          margin-top: 0.13rem;
        }
      }

      .bgStyle_2 {
        background: url("../../assets/images/personal_center/coupon.png") no-repeat;
        background-size: 100% 100%;
      }
    }

    .font_size_1 {
      font-size: 0.64rem;
    }

    .font_size_2 {
      font-size: 0.54rem;
    }

    .font_size_3 {
      font-size: 0.44rem;
    }
  }

  /deep/ .van-list__finished-text, /deep/ .van-loading__text {
    font-size: 0.32rem;
    text-align: center;
    color: #999999;
  }
}
</style>
